<template>
  <el-container>
    <!-- 全局导航栏 -->
    <el-header class="header">
      <el-menu mode="horizontal" :router="true" class="nav-menu">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/restaurants">餐厅列表</el-menu-item>
        <el-menu-item index="/user-info">用户信息</el-menu-item>
      </el-menu>
      <h1 class="welcome-message">你好！欢迎使用惊喜一餐！</h1>
    </el-header>

    <el-main>
      <!-- 轮播图 -->
      <el-carousel :interval="4000" type="card" height="600px" class="carousel">
        <el-carousel-item v-for="restaurant in restaurants" :key="restaurant.id">
          <el-card class="box-card">
            <img :src="getImageUrl(restaurant.image)" class="image" alt="Restaurant Image">
            <div class="restaurant-info">
              <span>{{ restaurant.name }}</span>
              <p>{{ restaurant.description }}</p>
            </div>
          </el-card>
        </el-carousel-item>
      </el-carousel>

      <!-- 餐厅卡片展示 -->
      <el-row :gutter="20" class="restaurant-cards">
        <el-col :span="8" v-for="restaurant in restaurants" :key="restaurant.id">
          <el-card class="restaurant-card">
            <img :src="getImageUrl(restaurant.image)" class="restaurant-image" alt="Restaurant Image">
            <div class="restaurant-content">
              <h3>{{ restaurant.name }}</h3>
              <p>{{ restaurant.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'

// 获取图片 URL 的方法，适用于 Vite 和 Webpack
function getImageUrl(imagePath) {
  return new URL(`../assets/${imagePath}`, import.meta.url).href;
}

// 这里应该从API获取实际数据
const restaurants = ref([
  {
    id: 1,
    name: '简朴的餐厅1',
    description: '这是一家简朴的餐厅，菜品比较家常，价格也比较便宜',
    image: 'picture1.jpg' // 确保文件名正确无误
  },
  {
    id: 2,
    name: '高档的餐厅2',
    description: '这是一家高档的餐厅，菜品丰富珍贵，价格也比较昂贵',
    image: 'picture2.jpg' // 确保文件名正确无误
  },
  {
    id: 3,
    name: '汪云山的餐厅', // 新增餐厅
    description: '这是由汪云山开的餐厅，比较垃圾',
    image: 'picture.jpg' // 新增图片路径
  }
])
</script>

<style scoped>
/* 添加一些样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  position: relative; /* 使 .welcome-message 可以相对于 header 定位 */
}

.nav-menu {
  flex-grow: 1; /* 让菜单占据更多空间，以便为欢迎信息留出居中的空间 */
}

.welcome-message {
  margin: 0;
  font-size: 2rem;
  color: blue; /* 设置字体颜色为蓝色 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.carousel {
  margin-top: 20px;
}

.box-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 0; /* 移除默认内边距 */
}

.image {
  width: 100%; /* 图片宽度占满整个卡片 */
  height: 250px; /* 设置较高的固定高度 */
  object-fit: cover; /* 确保图片覆盖整个区域而不失真 */
  margin-bottom: 10px;
}

.restaurant-info {
  text-align: center;
  padding: 10px; /* 添加一些内边距 */
}

.restaurant-cards {
  margin-top: 20px;
}

.restaurant-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.restaurant-image {
  width: 100%;
  height: 200px; /* 固定高度 */
  object-fit: cover;
}

.restaurant-content {
  padding: 10px;
}
</style>